<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <div class="bgfs">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <div class="header">
            <div style="padding-top:5px" class="line">
              <div class="d-flex">
                <dv-decoration-10 style="width:50%;height:5px;" :color="['#30cfd0', '#4F83D3']" class="dv-dec-10-r" />
                <dv-decoration-10 style="width:50%;height:5px;" :color="['#30cfd0', '#4F83D3']" />
              </div>
              <!-- <dv-decoration-5   class="dv-dec-5" :color="['#3469B5', '#3469B5']"   dur="6"></dv-decoration-5> -->
              <div class="d-flex jc-between" style="padding-top: 20px;">
                <div>
                  <dv-decoration-2 style="width:570px;height:10px;" :color="['#30cfd0', '#4F83D3']" />
                  <div class="d-flex">
                    <dv-decoration-2 style="width:210px;height:10px;margin-right: 35px;"
                      :color="['#30cfd0', '#4F83D3']" />
                    <dv-decoration-2 style="width:300px;height:10px;" :color="['#30cfd0', '#4F83D3']" />
  
                  </div>
                </div>
                <div>
                  <dv-decoration-2 style="width:570px;height:10px;" :color="['#30cfd0', '#4F83D3']" class="dv-dec-10-r" />
                  <div class="d-flex dv-dec-10-r">
                    <dv-decoration-2 style="width:240px;height:10px;margin-right: 35px;"
                      :color="['#30cfd0', '#4F83D3']" />
                    <dv-decoration-2 style="width:300px;height:10px;" :color="['#30cfd0', '#4F83D3']" />
                  </div>
                </div>
              </div>
            </div>
            <div class="title" style="">
              <img src="@/assets/bTitle.png" alt="">
              <img src="@/assets/sTitle.png" alt="">
            </div>
            <div>
              <div class="d-flex jc-center">
  
              </div>
            </div>
            <div class="d-flex jc-between header-text">
              <div class="weather">
                <span class="text">
                  <i class="el-icon-location"></i>
                  {{ dataWeather.city }}
                </span>
                <!-- <img :src="dataWeather.icontemp" alt="" style="width:30px;height:30px;background:#fff"> -->
                <span>
                  {{ dataWeather.weathertemp }}
                </span>
                <span>
                  {{ dataWeather.peraturetemp }}
                </span>
              </div>
              <div class="time">
                <span> {{dateYear}}</span><span>{{ dateWeek }}</span><span>{{dateDay}}</span>
              </div>
            </div>
          </div>
          <div class="circleBg">
            <img src="@/assets/circle.png" alt="" class="circleImg">
            <img src="@/assets/circle1.png" alt="" class="circleImg circleImg1">
          </div>
          <!-- 第二行 -->
  
          <!-- {{ dateYear }} {{ dateWeek }} {{ dateDay }} -->
          <div class="body-box">
            <!-- 第三行数据 -->
  
            <div class="mapCenter">
              <center :echartData="echartData"/>
            </div>
            <div class="content-box">
              <div>
                <div class="chartItem">
                  <div class="chartTitle">
                    <img src="../assets/title1.png" alt="">
                  </div>
                  <left1 :echartData="echartData"/>
                </div>
                <div class="chartItem">
  
                  <div class="chartTitle">
                    <img src="../assets/title2.png" alt="">
                  </div>
                  <left2  :echartData="echartData"/>
                </div>
                <div  class="chartItem"> 
                  <div class="chartTitle">
                    <img src="../assets/title3.png" alt="">
                  </div>
                  <centerBottom :echartData="echartData"/>
                </div>
              </div>
              <!-- 中间 -->
              <div class="indexCenter">
                <centerTop :totalData="totalData"></centerTop>
                <!-- <centerBottom></centerBottom> -->
              </div>
              <!-- 中间 -->
              <div>
                <div class="chartItem">
  
                  <div class="chartTitle">
                    <img src="../assets/title5.png" alt="">
                  </div>
                  <right1 :echartData="echartData"/>
                </div>
                <div class="chartItem"> 
                  <div class="chartTitle">
                    <img src="../assets/title4.png" alt="">
                  </div>
                  <right2 :echartData="echartData"/>
                </div>
                <div class="chartItem"> 
                  <div class="chartTitle">
                    <img src="../assets/title6.png" alt="">
                  </div>
                  <scatter />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bah">粤ICP备17024802号-1</div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import { formatTime } from "@/utils/index.js"
  import { weatherOption } from "@/config/weatherOption";
  import drawMixin from "../utils/drawMixin";

  import center from "./components/center";
  import right1 from "./components/right1";
  import right2 from "./components/right2";
  import right3 from "./components/right3";
  import left1 from "./components/left1";
  import left2 from "./components/left2";
  import left3 from "./components/left3";
  import centerBottom from "./components/centerBottom";
  import centerTop from "./components/centerTop";
  import pie3d from "./components/pie3d";
  import scatter from "./components/scatter"
  import {getArea,getAreastat} from "@/api/data"
  export default {
    mixins: [drawMixin],
    data() {
      return {
        timing: null,
        loading: true,
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        decorationColor: ['#568aea', '#000000'],
        echartData:[
        {
                projects:12,
                "anaDate":"2022-11",
                "brands":120,
                "typeDesc":"市",
                "invest":100,
                "upCount":210, 
                "cityId":"312",
                "type":"1",
                "personnels":50,
                "provinceId":"282",
                "products":120,
                "output":120,
                "downCount":200,
                "markets":28,
                "cityName":"长治市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"312_2022-11",
                "retailSalesOnline":120,
                "countyName":""
            }, 
            {
              
              projects:10,
              "brands":3,
                "typeDesc":"市",
                "anaDate":"2022-11",
                "invest":120,
                "upCount":220, 
                "cityId":"312",
                "type":"1",
                "personnels":40,
                "provinceId":"282",
                "products":130,
                "output":130,
                "downCount":210,
                "markets":32,
                "cityName":"阳泉市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"306_2022-11",
                "retailSalesOnline":110,
                "countyName":""
            },
            {
              
              projects:21,
                "anaDate":"2022-11",
                "brands":140,
                "typeDesc":"市",
                "invest":150,
                "upCount":230, 
                "cityId":"312",
                "type":"1",
                "personnels":70,
                "provinceId":"282",
                "products":150,
                "output":190,
                "downCount":230,
                "markets":32,
                "cityName":"太原市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"283_2022-11",
                "retailSalesOnline":130,
                "countyName":""
            },
            {
              
              projects:15,
                "anaDate":"2022-11",
              "brands":120,
                "typeDesc":"市",
                "invest":100,
                "upCount":210, 
                "cityId":"312",
                "type":"1",
                "personnels":50,
                "provinceId":"282",
                "products":120,
                "output":120,
                "downCount":200,
                "markets":28,
                "cityName":"运城市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"352_2022-11",
                "retailSalesOnline":180,
                "countyName":""
            },
            {
                projects:22,
                "anaDate":"2022-11",
              "brands":140,
                "typeDesc":"市",
                "invest":150,
                "upCount":230, 
                "cityId":"312",
                "type":"1",
                "personnels":70,
                "provinceId":"282",
                "products":150,
                "output":190,
                "downCount":230,
                "markets":32,
                "cityName":"临汾市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"381_2022-11",
                "retailSalesOnline":160,
                "countyName":""
            },
            {
              
              projects:10,
                "anaDate":"2022-11",
              "brands":140,
                "typeDesc":"市",
                "invest":130,
                "upCount":130, 
                "cityId":"312",
                "type":"1",
                "personnels":40,
                "provinceId":"282",
                "products":150,
                "output":140,
                "downCount":150,
                "markets":22,
                "cityName":"吕梁市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"399_2022-11",
                "retailSalesOnline":120,
                "countyName":""
            },
            {
                projects:14,
                "anaDate":"2022-11",
              "brands":140,
                "typeDesc":"市",
                "invest":150,
                "upCount":230, 
                "cityId":"312",
                "type":"1",
                "personnels":70,
                "provinceId":"282",
                "products":150,
                "output":190,
                "downCount":230,
                "markets":32,
                "cityName":"晋城市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"326_2022-11",
                "retailSalesOnline":140,
                "countyName":""
            },
            {
              projects:12,
                "anaDate":"2022-11",
              "brands":120,
                "typeDesc":"市",
                "invest":100,
                "upCount":210, 
                "cityId":"312",
                "type":"1",
                "personnels":50,
                "provinceId":"282",
                "products":120,
                "output":120,
                "downCount":200,
                "markets":28,
                "cityName":"朔州市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"333_2022-11",
                "retailSalesOnline":150,
                "countyName":""
            },
            {
                projects:19,
                "anaDate":"2022-11",
                "brands":150,
                "typeDesc":"市",
                "invest":120,
                "upCount":180, 
                "cityId":"312",
                "type":"1",
                "personnels":50,
                "provinceId":"282",
                "products":140,
                "output":170,
                "downCount":180,
                "markets":38,
                "cityName":"晋中市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"340_2022-11",
                "retailSalesOnline":176,
                "countyName":""
            },
            {
                projects:17,
                "anaDate":"2022-11",
                "brands":150,
                "typeDesc":"市",
                "invest":100,
                "upCount":210, 
                "cityId":"312",
                "type":"1",
                "personnels":50,
                "provinceId":"282",
                "products":120,
                "output":120,
                "downCount":200,
                "markets":28,
                "cityName":"大同市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"294_2022-11",
                "retailSalesOnline":156,
                "countyName":""
            },
            {
                projects:12,
                "anaDate":"2022-11",
                "brands":150,
                "typeDesc":"市",
                "invest":190,
                "upCount":230, 
                "cityId":"312",
                "type":"1",
                "personnels":70,
                "provinceId":"282",
                "products":190,
                "output":140,
                "downCount":230,
                "markets":28,
                "cityName":"忻州市",
                "countyId":"",
                "retailSales":0,
                "shops":0,
                "planId":"1",
                "_class":"com.ecri.stat.es.AreaMonStat",
                "id":"366_2022-11",
                "retailSalesOnline":156,
                "countyName":""
            }, 
        ],
        totalData:[],
        markets:[
          {}
        ],
        dataWeather: {
          city: '北京市',
          dayweather: '晴',
          nightweather: '多云',
          weathertemp: '晴', // 根据时间判断选白天还是晚上的天气
          nighttemp: '3℃',
          daytemp: '15℃',
          peraturetemp: '3℃~15℃', // 根据时间判断选白天还是晚上的温度
          icontemp: 'https://cdn.heweather.com/cond_icon/100.png',
        },
      }
    },
    components: {
      center,
      right1,
      right2,
      right3,
      left1,
      left2,
      left3,
      centerBottom,
      centerTop,
      pie3d,
      scatter
    },
    mounted() {
      this.timeFn()
      this.cancelLoading()
      this.requestGetWeather()
      // getArea({type:1,provinceId:'282'}).then(res=>{
      //    this.echartData=res.data.datas
      // })
      // getArea({type:0,provinceId:'282'}).then(res=>{
      //    this.totalData=res.data.datas[0]
      // })
      // getAreastat({type:1,provinceId:'282',page:1,size:100}).then(res=>{
      //   this.markets=res.data.datas
      // })
    },
    beforeDestroy() {
      clearInterval(this.timing)
    },
    methods: {
      timeFn() {
        this.timing = setInterval(() => {
          this.dateDay = formatTime(new Date(), 'HH: mm: ss')
          this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
          this.dateWeek = this.weekday[new Date().getDay()]
        }, 1000)
      },
      cancelLoading() {
        setTimeout(() => {
          this.loading = false
        }, 500)
      },

      requestGetWeather() {
        $.get({
          //这里的url不能写到data对象的外面
          url: 'https://api.asilu.com/weather_v2/',
          dataType: 'jsonp',  // 请求方式为jsonp
          success: (data) => {
            if (data.status === '1') {
              let currTime = new Date().getHours();
              let dailyForecast = data.forecasts[0].casts[0];
              let city = data.forecasts[0].city;
              let daytemp = dailyForecast.daytemp + '℃';
              let nighttemp = dailyForecast.nighttemp + '℃';
              let weathertemp = '';
              let peraturetemp = '';
              if ((currTime >= 6) && (currTime < 18)) {
                weathertemp = dailyForecast.dayweather;
                peraturetemp = dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
              } else {
                weathertemp = dailyForecast.nightweather;
                peraturetemp = dailyForecast.daytemp + "℃~" + dailyForecast.nighttemp + "℃";
              }
              let icontemp = 'https://cdn.heweather.com/cond_icon/' + weatherOption.weatherCode[weathertemp] + '.png';
              this.dataWeather = { city, daytemp, nighttemp, weathertemp, peraturetemp, icontemp }
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/scss/index.scss';
/* chartItem */
  .mapCenter {
    position: absolute;
    left: 0;
    right: 0;
  }

  .indexCenter {
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    align-content: space-between;
  }

  .header-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 50px;

    .time {
      font-size: 20px;
      line-height: 50px;

      span {
        padding: 0 10px;
      }
    }

    .weather {
      font-size: 20px;
      line-height: 50px;

      img {
        vertical-align: middle;
      }

      span {
        padding: 0 10px;
      }
    }
  }
  .chartItem{
      width: 455px;
      height: 305px;
      margin: 0 auto;
      margin-top: 5px;
      padding-top: 15px;
      box-sizing: border-box;
      background: rgba(6,29,61,0.5);
      position: relative;
      &::before{
        content: "";
        width: 100%;
        height: 2px;
        background: #249CF8;
        opacity: 0.3;
        position:absolute;
        left:0;
        top:0
      }
      &::after{
        content: "";
        width: 100%;
        height:2px;
        background: #249CF8;
        opacity: 0.3;
        position:absolute;
        left:0;
        bottom:0
      }
  }
  .chartTitle{
    img{
      display: block;
      margin:0 auto
    }
  }
  .bah{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color:#fff;
    padding-bottom: 5px;
  }
</style>